<template>
	<view class="order-detail-container">
		<!-- 头部导航栏 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content">
					<view class="header-left" @click="closePage">
						<text class="cuIcon-back"></text>
					</view>
					<view class="header-center">
						<text class="header-title">订单详情</text>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 订单状态 -->
			<view class="order-status-card">
				<view class="status-header">
					<text class="status-icon" :class="statusIconClass">{{ statusIcon }}</text>
					<view class="status-info">
						<view class="status-text">{{ getStatusText(orderDetail.status) }}</view>
						<view class="status-desc">{{ getStatusDesc(orderDetail.status) }}</view>
					</view>
				</view>
				<view class="order-progress">
					<view class="progress-item">
						<text class="progress-icon" :class="{ completed: orderDetail.status === 'paid' }">
							{{ orderDetail.status === 'paid' ? '✅' : '⏰' }}
						</text>
						<text class="progress-text">已付款</text>
						<text class="progress-time">{{ formatDate(orderDetail.payTime) }}</text>
					</view>
					<view class="progress-item">
						<text class="progress-icon" :class="{ completed: orderDetail.status === 'shipped' }">
							{{ orderDetail.status === 'shipped' ? '📦' : '⏰' }}
						</text>
						<text class="progress-text">已发货</text>
						<text class="progress-time">{{ formatDate(orderDetail.shipTime) }}</text>
					</view>
					<view class="progress-item">
						<text class="progress-icon" :class="{ completed: orderDetail.status === 'delivered' }">
							{{ orderDetail.status === 'delivered' ? '🚚' : '⏰' }}
						</text>
						<text class="progress-text">已送达</text>
						<text class="progress-time">{{ formatDate(orderDetail.completeTime) }}</text>
					</view>
					<view class="progress-item" v-if="orderDetail.status === 'cancelled'">
						<text class="progress-icon completed">
							❌
						</text>
						<text class="progress-text">已取消</text>
						<text class="progress-time">{{ formatDate(orderDetail.cancelTime) }}</text>
					</view>
				</view>
			</view>

			<!-- 买家信息 -->
			<view class="customer-info-card products-card">
				<view class="card-title">买家信息</view>
				<view class="customer-header flex flex-direction ">
					<image class="customer-avatar" :src="userAvatar" mode="aspectFill"></image>
					<view class="customer-info">
						<view class="customer-name">姓名: {{ userName }}</view>
						<view class="customer-phone">电话: {{ userPhone }}</view>
					</view>
				</view>
				<!-- <view class="contact-actions">
					<button class="contact-btn call-btn" @click="contactBuyer">
						<text class="cuIcon-phone"></text> 联系买家
					</button>
					<button class="contact-btn message-btn" @click="contactBuyer">
						<text class="cuIcon-chat"></text> 消息买家
					</button>
				</view> -->
			</view>

			<!-- 商品信息 -->
			<view class="products-card">
				<view class="card-title">商品信息</view>
				<view class="product-item" v-for="item in orderDetail.products" :key="item._id">
					<image class="product-image" :src="getProductImage(item)" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{ getProductName(item) }}</text>
						<text class="product-spec">{{ getProductDesc(item) }}</text>
						<text
							class="product-price">¥{{ formatMoney(item.productId ? item.productId.price : item.price) }}</text>
					</view>
					<text class="product-quantity">x{{ item.quantity }}</text>
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="address-card" v-if="getAddressInfo()">
				<view class="card-title">收货地址</view>
				<view class="address-content">
					<view class="address-info">
						<text class="receiver-name">{{ getReceiverName() }}</text>
						<text class="receiver-phone">{{ getReceiverPhone() }}</text>
					</view>
					<text class="address-detail">{{ getReceiverAddress() }}</text>
				</view>
			</view>

			<!-- 配送信息 -->
			<view class="order-info-card">
				<view class="card-title">订单信息</view>
				<view class="info-item">
					<text class="info-label">订单号：</text>
					<text class="info-value">{{ orderDetail.orderNo }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">下单时间：</text>
					<text class="info-value">{{ formatDate(orderDetail.createTime) }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.payTime">
					<text class="info-label">付款时间：</text>
					<text class="info-value">{{ formatDate(orderDetail.payTime) }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.shipTime">
					<text class="info-label">发货时间：</text>
					<text class="info-value">{{ formatDate(orderDetail.shipTime) }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.completeTime">
					<text class="info-label">完成时间：</text>
					<text class="info-value">{{ formatDate(orderDetail.completeTime) }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.cancelTime">
					<text class="info-label">取消时间：</text>
					<text class="info-value">{{ formatDate(orderDetail.cancelTime) }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.cancelReason">
					<text class="info-label">取消原因：</text>
					<text class="info-value">{{ orderDetail.cancelReason }}</text>
				</view>
			</view>

			<!-- 金额明细 -->
			<view class="order-amount-card">
				<view class="amount-item">
					<text class="amount-label">商品总额</text>
					<text class="amount-value">¥{{ formatMoney(calculateSubtotal()) }}</text>
				</view>
				<view class="amount-item" v-if="orderDetail.deliveryServiceFee && orderDetail.deliveryServiceFee > 0">
					<text class="amount-label">配送费</text>
					<text class="amount-value">¥{{ formatMoney(orderDetail.deliveryServiceFee) }}</text>
				</view>
				<view class="amount-item" v-if="orderDetail.couponId && getCouponDiscount() > 0">
					<text class="amount-label">优惠券</text>
					<text class="amount-value discount">-¥{{ formatMoney(getCouponDiscount()) }}</text>
				</view>
				<view class="amount-item total">
					<text class="amount-label">实付金额</text>
					<text class="amount-value">¥{{ formatMoney(orderDetail.payAmount) }}</text>
				</view>
			</view>

			<!-- 备注信息 -->
			<view class="order-info-card" v-if="orderDetail.remark && orderDetail.remark.trim()">
				<view class="card-title">备注信息</view>
				<view class="remark-content">
					<text class="remark-text">{{ orderDetail.remark }}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="order-actions" v-if="showActions">
			<view class="action-buttons">
				<button class="action-btn secondary" @click="contactBuyer">联系买家</button>
				<button class="action-btn danger"
					v-if="(orderDetail.status === 'pending' || orderDetail.status === 'paid' || orderDetail.payStatus === 'paid') && orderDetail.status !== 'cancelled' && orderDetail.status !== 'completed'"
					@click="cancelOrder">
					取消订单
				</button>
				<button class="action-btn primary"
					v-if="(orderDetail.status === 'paid' || orderDetail.payStatus === 'paid') && orderDetail.status !== 'cancelled' && orderDetail.status !== 'completed'" @click="confirmShip">
					确认发货
				</button>
				<button class="action-btn primary" v-if="(orderDetail.status === 'shipped' || orderDetail.status === 'received' || orderDetail.status === 'delivered') && orderDetail.status !== 'cancelled' && orderDetail.status !== 'completed' && !isMerchant" @click="confirmComplete">
					确认完成
				</button>
			</view>
		</view>

		<!-- 发货确认弹窗 -->
		<uni-popup ref="shipPopup" type="bottom">
			<view class="ship-popup">
				<view class="popup-header">
					<view class="popup-title-section">
						<text class="popup-icon">📦</text>
						<text class="popup-title">确认发货</text>
					</view>
					<text class="popup-close" @click="closeShipPopup">✕</text>
				</view>
				
				<view class="popup-content">
					<!-- 订单信息 -->
					<view class="order-info-section">
						<text class="section-title">订单信息</text>
						<view class="order-info-item">
							<text class="info-label">订单号：</text>
							<text class="info-value">{{ orderDetail.orderNo }}</text>
						</view>
						<view class="order-info-item">
							<text class="info-label">商品：</text>
							<text class="info-value">{{ getProductSummary() }}</text>
						</view>
						<view class="order-info-item">
							<text class="info-label">金额：</text>
							<text class="info-value">¥{{ formatMoney(orderDetail.payAmount) }}</text>
						</view>
					</view>
					
					<!-- 配送信息 -->
					<view class="delivery-section">
						<text class="section-title">配送信息</text>
						<view class="input-group">
							<text class="input-label">配送时间</text>
							<picker 
								mode="date" 
								:value="deliveryDate" 
								@change="onDateChange"
								class="date-picker"
							>
								<view class="picker-content">
									<text class="picker-text">{{ deliveryDate || '选择日期' }}</text>
									<text class="picker-arrow">📅</text>
								</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">配送时段</text>
							<picker 
								:value="timeSlotIndex" 
								:range="timeSlots" 
								range-key="text"
								@change="onTimeSlotChange"
								class="time-picker"
							>
								<view class="picker-content">
									<text class="picker-text">{{ getTimeSlotText() }}</text>
									<text class="picker-arrow">⏰</text>
								</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">备注信息</text>
							<textarea 
								class="textarea-field" 
								v-model="shipRemark" 
								placeholder="请输入配送备注信息（可选）"
								maxlength="200"
							></textarea>
							<text class="char-count">{{ shipRemark.length }}/200</text>
						</view>
					</view>
				</view>
				
				<view class="popup-actions">
					<button class="popup-btn secondary" @click="closeShipPopup">取消</button>
					<button class="popup-btn primary" @click="submitShip" :disabled="!deliveryDate">
						确认发货
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 空状态 -->
		<view class="empty-state" v-if="!orderDetail.products || orderDetail.products.length === 0">
			<text class="empty-icon cuIcon-order"></text>
			<text class="empty-text">暂无商品信息</text>
			<text class="empty-desc">请稍后再试或联系客服</text>
		</view>
	</view>
</template>

<script>
	import {
		getShopOrderDetail,
		confirmShip,
		confirmComplete,
		cancelShopOrder
	} from '@/api/shop.js'
	import headerSlot from '@/components/header-slot.vue'

	export default {
		components: {
			headerSlot
		},
		data() {
			return {
				orderId: '',
				orderDetail: {},
				deliveryTime: '',
				deliveryDate: '',
				timeSlotIndex: 0,
				shipRemark: '',
				timeSlots: [
					{ value: '09:00-12:00', text: '上午 (09:00-12:00)' },
					{ value: '12:00-15:00', text: '中午 (12:00-15:00)' },
					{ value: '15:00-18:00', text: '下午 (15:00-18:00)' },
					{ value: '18:00-21:00', text: '晚上 (18:00-21:00)' }
				],
				loading: false
			}
		},
		computed: {
			statusIconClass() {
				const iconMap = {
					'pending': 'status-pending',
					'paid': 'status-paid',
					'shipped': 'status-shipped',
					'delivered': 'status-delivered',
					'completed': 'status-completed',
					'cancelled': 'status-cancelled'
				}
				return iconMap[this.orderDetail.status] || 'status-pending'
			},
			statusIcon() {
				const iconMap = {
					'pending': '⏰',
					'paid': '💰',
					'shipped': '📦',
					'delivered': '🚚',
					'completed': '✅',
					'cancelled': '❌'
				}
				return iconMap[this.orderDetail.status] || '⏰'
			},
			userAvatar() {
				return this.orderDetail.userId && this.orderDetail.userId.avatar ? this.orderDetail.userId.avatar :
					'/static/logo-orange.png'
			},
			userName() {
				return this.orderDetail.userId && this.orderDetail.userId.nickname ? this.orderDetail.userId.nickname :
					'未知用户'
			},
			userPhone() {
				return this.orderDetail.userId && this.orderDetail.userId.phone ? this.orderDetail.userId.phone : '未知电话'
			},
			showActions() {
				// 如果订单已取消或已完成，不显示操作按钮
				if (this.orderDetail.status === 'cancelled' || this.orderDetail.status === 'completed') {
					return false
				}
				return ['paid', 'shipped', 'received', 'delivered'].includes(this.orderDetail.status) || this.orderDetail.payStatus === 'paid'
			},
			// 判断是否为商户
			isMerchant() {
				const userInfo = this.$store.state.userInfo || {};
				// 修复：商户应该可以操作自己的店铺订单
				return false; // 暂时禁用商户限制，让商户可以正常操作
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id
				this.loadOrderDetail()
			}
		},
		methods: {
			// 关闭页面
			closePage() {
				uni.navigateBack()
			},

			// 加载订单详情
			async loadOrderDetail() {
				try {
					this.loading = true
					const res = await getShopOrderDetail(this.orderId)
					if (res.data.code === 200) {
						this.orderDetail = res.data.data
					}
				} catch (error) {
					console.error('加载订单详情失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 格式化金额
			formatMoney(amount) {
				return Number(amount || 0).toFixed(2)
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return ''
				const date = new Date(dateStr)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hour = String(date.getHours()).padStart(2, '0')
				const minute = String(date.getMinutes()).padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}`
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待付款',
					'paid': '已付款',
					'shipped': '已发货',
					'received': '已送达', // 新增：支持 received 状态
					'delivered': '已送达',
					'completed': '已完成',
					'cancelled': '已取消'
				}
				return statusMap[status] || '未知状态'
			},

			// 获取状态描述
			getStatusDesc(status) {
				const descMap = {
					'pending': '等待买家付款',
					'paid': '买家已付款，请及时发货',
					'shipped': '商品已发货，等待买家确认',
					'received': '商品已送达，等待买家确认', // 新增：支持 received 状态
					'delivered': '商品已送达，等待买家确认',
					'completed': '订单已完成',
					'cancelled': this.orderDetail.cancelReason || '订单已取消'
				}
				return descMap[status] || ''
			},

			// 获取商品图片
			getProductImage(item) {
				return item.productId && item.productId.images && item.productId.images[0] ? item.productId.images[0] :
					'/static/logo-orange.png'
			},

			// 获取商品名称
			getProductName(item) {
				return item.productId && item.productId.name ? item.productId.name : '未知商品'
			},

			// 获取商品描述
			getProductDesc(item) {
				return item.productId && item.productId.description ? item.productId.description : ''
			},

			// 获取优惠券折扣
			getCouponDiscount() {
				return this.orderDetail.couponId && this.orderDetail.couponId.discountValue ? this.orderDetail.couponId
					.discountValue : 0
			},

			// 联系买家
			contactBuyer() {
				// 这里可以实现联系买家的功能，比如跳转到聊天页面
				uni.showModal({
					title: '联系买家',
					content: '确定要联系买家吗？',
					success: (res) => {
						if (res.confirm) {
							// 可以跳转到聊天页面或拨打电话
							uni.showToast({
								title: '正在跳转到聊天页面...',
								icon: 'none'
							})
							// 这里可以添加跳转到聊天页面的逻辑
							// uni.navigateTo({
							//     url: `/pages/messagePages/chat?userId=${this.orderDetail.user._id}`
							// })
						}
					}
				})
			},

			// 取消订单
			async cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '确定要取消订单吗？取消后订单将无法恢复。',
					success: async (res) => {
						if (res.confirm) {
							try {
								const result = await cancelShopOrder(this.orderId)
								if (result.data && result.data.code === 200) {
									uni.showToast({
										title: '订单已取消',
										icon: 'success'
									})
																	// 更新本地订单数据
								const orderData = result.data && result.data.data
								if (orderData) {
									this.orderDetail = orderData
								} else {
									this.loadOrderDetail()
								}
								} else {
																	uni.showToast({
									title: (result.data && result.data.message) || '操作失败',
									icon: 'none'
								})
								}
							} catch (error) {
								console.error('取消订单失败:', error)
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 确认发货
			confirmShip() {
				this.$refs.shipPopup.open()
			},

			// 关闭发货弹窗
			closeShipPopup() {
				this.$refs.shipPopup.close()
				this.deliveryTime = ''
				this.deliveryDate = ''
				this.timeSlotIndex = 0
				this.shipRemark = ''
			},

			// 日期选择
			onDateChange(e) {
				this.deliveryDate = e.detail.value
			},

			// 时段选择
			onTimeSlotChange(e) {
				this.timeSlotIndex = e.detail.value
			},

			// 获取商品摘要
			getProductSummary() {
				if (!this.orderDetail.products || this.orderDetail.products.length === 0) {
					return '暂无商品'
				}
				const names = this.orderDetail.products.map(item => {
					if (item.productId && item.productId.name) {
						return item.productId.name
					} else if (item.name) {
						return item.name
					}
					return ''
				}).filter(Boolean)
				return names.join('、')
			},

			// 获取时段文本
			getTimeSlotText() {
				if (this.timeSlots && this.timeSlots[this.timeSlotIndex]) {
					return this.timeSlots[this.timeSlotIndex].text
				}
				return '选择时段'
			},

			// 提交发货
			async submitShip() {
				if (!this.deliveryDate) {
					uni.showToast({
						title: '请选择配送日期',
						icon: 'none'
					})
					return
				}

				const selectedTimeSlot = this.timeSlots[this.timeSlotIndex]
				if (!selectedTimeSlot) {
					uni.showToast({
						title: '请选择配送时段',
						icon: 'none'
					})
					return
				}
				const deliveryTime = `${this.deliveryDate} ${selectedTimeSlot.value.split('-')[0]}`

				try {
					const res = await confirmShip(this.orderId, {
						deliveryTime: deliveryTime,
						remark: this.shipRemark
					})
					if (res.code === 200) {
						uni.showToast({
							title: '发货成功',
							icon: 'success'
						})
						this.closeShipPopup()
						this.loadOrderDetail()
					}
				} catch (error) {
					console.error('确认发货失败:', error)
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				}
			},

			// 确认完成
			async confirmComplete() {
				// 检查是否为商户，商户不允许直接完成订单
				const userInfo = this.$store.state.userInfo || {};
				if (userInfo.shops && userInfo.shops.length > 0) {
					uni.showModal({
						title: '操作限制',
						content: '商户不允许直接完成订单，请联系买家确认收货后自动完成',
						showCancel: false,
						confirmText: '我知道了'
					});
					return;
				}
				
				uni.showModal({
					title: '确认完成',
					content: '确定要确认订单完成吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const result = await confirmComplete(this.orderId)
								if (result.code === 200) {
									uni.showToast({
										title: '操作成功',
										icon: 'success'
									})
									this.loadOrderDetail()
								}
							} catch (error) {
								console.error('确认完成失败:', error)
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 获取地址信息
			getAddressInfo() {
				if (!this.orderDetail.address) return null
				try {
					return typeof this.orderDetail.address === 'string' ?
						JSON.parse(this.orderDetail.address) :
						this.orderDetail.address
				} catch (error) {
					console.error('解析地址信息失败:', error)
					return null
				}
			},

			// 获取收货人姓名
			getReceiverName() {
				const addressInfo = this.getAddressInfo()
				return addressInfo ? addressInfo.name : '未知'
			},

			// 获取收货人电话
			getReceiverPhone() {
				const addressInfo = this.getAddressInfo()
				return addressInfo ? addressInfo.phone : '未知'
			},

			// 获取收货地址
			getReceiverAddress() {
				const addressInfo = this.getAddressInfo()
				return addressInfo ? addressInfo.fullAddress : '未知'
			},

			// 计算商品总额
			calculateSubtotal() {
				let subtotal = 0;
				if (this.orderDetail.products && this.orderDetail.products.length > 0) {
					this.orderDetail.products.forEach(item => {
						subtotal += (item.productId ? item.productId.price : item.price) * item.quantity;
					});
				}
				return subtotal;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding-bottom: 120rpx;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx;
		background: transparent;
	}

	.header-left,
	.header-right {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.main-content {
		padding: 32rpx;
	}

	.order-status-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.status-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.status-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				margin-right: 24rpx;
				color: #fff;

				&.status-pending {
					background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
				}

				&.status-paid {
					background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
				}

				&.status-shipped {
					background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
				}

				&.status-delivered {
					background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
				}

				&.status-completed {
					background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
				}

				&.status-cancelled {
					background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
				}
			}

			.status-info {
				flex: 1;

				.status-text {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}

				.status-desc {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.order-progress {
			.progress-item {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.progress-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					margin-right: 16rpx;
					color: #fff;

					&.completed {
						background: #4caf50;
					}

					&.current {
						background: #667eea;
					}

					&.pending {
						background: #e0e0e0;
						color: #999;
					}
				}

				.progress-text {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				.progress-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.order-info-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 24rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info-label {
				font-size: 28rpx;
				color: #666;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.customer-info-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.customer-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.customer-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				border: 4rpx solid #fff;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			}

			.customer-info {
				flex: 1;

				.customer-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}

				.customer-phone {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.contact-actions {
			display: flex;
			gap: 16rpx;

			.contact-btn {
				flex: 1;
				padding: 20rpx;
				border-radius: 16rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s ease;

				&.call-btn {
					background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
				}

				&.message-btn {
					background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}

	.products-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 24rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.product-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.product-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
				background: #f8f9fa;
				border: 1rpx solid #e9ecef;
			}

			.product-info {
				flex: 1;

				.product-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 12rpx;
					line-height: 1.4;
				}

				.product-spec {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 12rpx;
				}

				.product-price {
					font-size: 28rpx;
					color: #f44336;
					font-weight: bold;
				}
			}

			.product-quantity {
				font-size: 28rpx;
				color: #666;
				margin-left: 16rpx;
			}
		}
	}

	.address-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 24rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.address-content {
			.address-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;

				.receiver-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.receiver-phone {
					font-size: 28rpx;
					color: #666;
				}
			}

			.address-detail {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
		}
	}

	.order-amount-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.amount-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
				padding-top: 20rpx;
				border-top: 1rpx solid #f0f0f0;
			}

			.amount-label {
				font-size: 28rpx;
				color: #666;
			}

			.amount-value {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;

				&.total {
					font-size: 36rpx;
					color: #f44336;
				}

				&.discount {
					color: #4caf50;
				}
			}
		}
	}

	.order-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.95);
		padding: 32rpx;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);

		.action-buttons {
			display: flex;
			gap: 16rpx;

			.action-btn {
				flex: 1;
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				transition: all 0.3s ease;

				&.primary {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
				}

				&.secondary {
					background: #f8f9fa;
					color: #666;
					border: 1rpx solid #e9ecef;
				}

				&.danger {
					background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(244, 67, 54, 0.3);
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 32rpx;

		.empty-icon {
			font-size: 120rpx;
			color: rgba(255, 255, 255, 0.6);
			margin-bottom: 32rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.remark-content {
		.remark-text {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	// 发货弹窗样式
	.ship-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0;
		max-height: 80vh;
		overflow: hidden;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1rpx solid #f0f0f0;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: #fff;

			.popup-title-section {
				display: flex;
				align-items: center;

				.popup-icon {
					font-size: 32rpx;
					margin-right: 16rpx;
				}

				.popup-title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.popup-close {
				font-size: 32rpx;
				padding: 8rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.2);
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup-content {
			padding: 32rpx;
			max-height: 60vh;
			overflow-y: auto;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 24rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f0f0f0;
			}

			.order-info-section {
				margin-bottom: 32rpx;

				.order-info-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;

					.info-label {
						font-size: 28rpx;
						color: #666;
					}

					.info-value {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
				}
			}

			.delivery-section {
				.input-group {
					margin-bottom: 24rpx;

					.input-label {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 12rpx;
						display: block;
					}

					.date-picker,
					.time-picker {
						.picker-content {
							background: #f8f9fa;
							border: 1rpx solid #e9ecef;
							border-radius: 16rpx;
							padding: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.picker-text {
								font-size: 28rpx;
								color: #333;
							}

							.picker-arrow {
								font-size: 24rpx;
								color: #666;
							}
						}
					}

					.textarea-field {
						width: 100%;
						background: #f8f9fa;
						border: 1rpx solid #e9ecef;
						border-radius: 16rpx;
						padding: 24rpx;
						font-size: 28rpx;
						color: #333;
						min-height: 120rpx;
						box-sizing: border-box;
					}

					.char-count {
						font-size: 24rpx;
						color: #999;
						text-align: right;
						margin-top: 8rpx;
					}
				}
			}
		}

		.popup-actions {
			display: flex;
			gap: 16rpx;
			padding: 32rpx;
			border-top: 1rpx solid #f0f0f0;
			background: #f8f9fa;

			.popup-btn {
				flex: 1;
				padding: 24rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				transition: all 0.3s ease;

				&.primary {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);

					&:disabled {
						background: #ccc;
						box-shadow: none;
					}
				}

				&.secondary {
					background: #fff;
					color: #666;
					border: 1rpx solid #e9ecef;
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
</style>